<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container" />

    <!-- 工具栏 -->
    <el-card class="page-tools">
      <!-- 第一行 -->
      <el-row type="flex" justify="space-between" align="middle">
        <!-- 处理提示 -->
        <el-col>
          <div class="before">
            <i class="el-icon-info" />
            有{{ attendInfo.tobeTaskCount }}条考勤审批尚未处理
          </div>
        </el-col>
        <!-- 右侧按钮 -->
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              type="primary"
              size="mini"
              @click="$router.push('/import?type=attendance')"
            >导入</el-button>
            <el-badge style="margin: 0 10px" is-dot class="item">
              <el-button
                type="primary"
                size="mini"
                @click="showRemind = !showRemind"
              >提醒</el-button>
            </el-badge>
            <el-button
              type="primary"
              size="mini"
              @click="showSet = !showSet"
            >设置</el-button>
            <el-button type="primary" size="mini" @click="$router.push('/attendances/archiving')">历史归档</el-button>
            <el-button type="primary" size="mini" @click="$router.push(`/attendances/report/${yearMonth}`)">{{ month }}月份报表</el-button>
          </el-row>
        </el-col>
      </el-row>

      <!-- 表单 -->
      <el-form
        ref="formData"
        :model="formData"
        label-width="85px"
        class="formInfo"
      >
        <!--部门-->
        <el-form-item label="部门 :">
          <el-checkbox-group v-model="formData.deptID">
            <el-checkbox
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 考勤 -->
        <el-form-item label="考勤状态：">
          <el-radio-group v-model="formData.stateID">
            <el-radio
              v-for="item in stateData.holidayType"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 考勤数据 -->
    <el-card style="margin: 0 10px">
      <div
        style="
          width: 100%;
          position: relative;
          overflow-x: auto;
          overflow-y: hidden;
        "
      >
        <div style="width: 3000px">
          <table
            border="0"
            align="center"
            cellpadding="0"
            cellspacing="0"
            class="tableInfo"
          >
            <tr>
              <th width="50">序号</th>
              <th width="100">姓名</th>
              <th width="100">工号</th>
              <th width="200">部门</th>
              <th width="100">手机</th>
              <th v-for="(it, ind) in monthOfReport" :key="ind" width="110">
                {{ attendInfo.month }}/{{ ind + 1 }}
              </th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
              <td width="50">{{ index + 1 }}</td>
              <td width="100">{{ item.username }}</td>
              <td width="100">{{ item.workNumber }}</td>
              <td width="200">{{ item.departmentName }}</td>
              <td width="100">{{ item.mobile }}</td>
              <td
                v-for="(it, ind) in item.attendanceRecord"
                :key="ind"
                width="110"
                @click="showChangeDialog(item, ind, it)"
              >
                <span v-if="it.adtStatu === 1">√</span>
                <span v-if="it.adtStatu === 2">旷工</span>
                <span v-if="it.adtStatu === 3">迟到</span>
                <span v-if="it.adtStatu === 4">早退</span>
                <span v-if="it.adtStatu === 5">外出</span>
                <span v-if="it.adtStatu === 6">出差</span>
                <span v-if="it.adtStatu === 7">年假</span>
                <span v-if="it.adtStatu === 8">事假</span>
                <span v-if="it.adtStatu === 9">病假</span>
                <span v-if="it.adtStatu === 10">婚假</span>
                <span v-if="it.adtStatu === 11">丧假</span>
                <span v-if="it.adtStatu === 12">产假</span>
                <span v-if="it.adtStatu === 13">奖励产假</span>
                <span v-if="it.adtStatu === 14">陪产假</span>
                <span v-if="it.adtStatu === 15">探亲假</span>
                <span v-if="it.adtStatu === 16">工伤假</span>
                <span v-if="it.adtStatu === 17">调休</span>
                <span v-if="it.adtStatu === 18">产检假</span>
                <span v-if="it.adtStatu === 19">流产假2</span>
                <span v-if="it.adtStatu === 20">长期病假</span>
                <span v-if="it.adtStatu === 21">测试架</span>
                <span v-if="it.adtStatu === 22">补签</span>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 点击考勤数据状态弹框 -->
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span slot="title" style="color:#fff;">{{ attendInfo.name }} {{ attendInfo.month }}/{{ attendInfo.getDate }}（实际工作日考勤方案）</span>
        <div class="attenInfo">
          <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
          <p class="check">
            <el-radio-group v-model="modifyData.adtStatu">
              <el-radio
                v-for="item in stateData.vacationtype"
                :key="item.id"
                :label="item.id"
                :value="item.name"
              >{{ item.name }}</el-radio>
            </el-radio-group></p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerbtnOK">确定</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>

      <!-- 分页组件 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          :page-size="page.pagesize"
          :current-page="page.page"
          layout="prev, pager, next"
          :total="page.total"
          @current-change="pageChange"
        />
      </el-row>
    </el-card>

    <!-- 设置弹出框 -->
    <el-dialog title="设置" :visible.sync="showSet" width="50%" :before-close="onCancel">
      <el-tabs v-model="setTabName" @tab-click="handleClick">
        <!-- 出勤设置栏 -->
        <el-tab-pane label="出勤设置" name="first">
          <el-form
            ref="attSetForm"
            :rules="attRules"
            :model="attSetForm"
            label-width="90px"
          >
            <el-form-item label="部门:" prop="departmentId">
              <el-select v-model="attSetForm.departmentId" placeholder="请选择" @change="handleChangeAttendance">
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="出勤时间:" prop="morningStartTime">
              <el-col :span="5">
                <el-time-select
                  v-model="attSetForm.morningStartTime"
                  :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '12:00',
                  }"
                  style="width: 100%"
                />
              </el-col>
              <el-col class="line" :span="0.5">-</el-col>
              <el-col :span="5">
                <el-time-select
                  v-model="attSetForm.morningEndTime"
                  :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '12:00',
                  }"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="5" :offset="1">
                <el-time-select
                  v-model="attSetForm.afternoonStartTime"
                  :picker-options="{
                    start: '13:30',
                    step: '00:15',
                    end: '23:30',
                  }"
                  style="width: 100%"
                />
              </el-col>
              <el-col class="line" :span="0.5">-</el-col>
              <el-col :span="5">
                <el-time-select
                  v-model="attSetForm.afternoonEndTime"
                  :picker-options="{
                    start: '13:30',
                    step: '00:15',
                    end: '23:30',
                  }"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="attSetSubmit"
              >保存更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 请假设置栏 -->
        <el-tab-pane label="请假设置" name="second">
          <el-form
            ref="leaveSetForm"
            :rules="leaveRules"
            :model="leaveSetForm"
            label-width="80px"
          >
            <el-form-item label="部门:" prop="departmentId">
              <el-select
                v-model="leaveSetForm.departmentId"
                placeholder="请选择"
                @change="handleChangeLeave"
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <span style="margin-left: 20px">假期类型：</span>

            <el-table
              :header-cell-style="styleObj"
              :data="leaveData"
              style="width: 100%; margin-left: 10px"
            >
              <el-table-column prop="name" label="类型" width="250" />
              <el-table-column prop="isEnable" label="是否可用" width="450">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.isEnable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  />
                </template>
              </el-table-column>
            </el-table>

            <el-form-item style="text-align: center; margin: 15px">
              <el-button
                type="primary"
                @click="onLeaveSubmit"
              >保存更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>

          <el-alert
            style="height: 80px; font-size: 15px; line-height: 20px"
            type="warning"
            :closable="false"
            show-icon
          >
            <template slot="title">
              <div>事假 请假单位为0.5天 只能提交工作日内的请假单</div>
              <div>当请假开关关闭后，员工则不可在员工端提交请假申请</div>
            </template>
          </el-alert>
        </el-tab-pane>

        <!-- 扣款设置栏 -->
        <el-tab-pane label="扣款设置" name="third">
          <el-form
            ref="deductionsSetFrom"
            :rules="deductionsRules"
            :model="deductionsSetFrom"
            label-width="80px"
          >
            <el-form-item label="部门:" prop="departmentId">
              <el-select
                v-model="deductionsSetFrom.departmentId"
                placeholder="请选择"
                @change="handleChangeDeductions"
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-table
              :header-cell-style="styleObj"
              :data="deductionsData"
              style="width: 100%; margin-left: 10px"
            >
              <el-table-column width="700">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                  <el-switch
                    v-model="scope.row.isEnable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  />
                  <!-- 迟到扣款 -->
                  <div
                    v-if="scope.row.dedTypeCode === '51000'"
                    class="attentInfo"
                  >
                    <p>
                      迟到≤
                      <el-input
                        v-model="scope.row.periodUpperLimit"
                        class="inputInfo"
                        value="30"
                      />分钟
                      <!-- @input.native="handleInput($event)" -->
                    </p>
                    <div class="deductionInfo">
                      <p>
                        迟到≤
                        <el-input
                          v-model="scope.row.timesUpperLimit"
                          class="inputInfo"
                        />次，每次扣款
                        <!-- @input.native="handleInput($event)" -->
                        <el-input
                          v-model="scope.row.dedAmonutUpperLimit"
                          class="inputInfo"
                        />元
                        <!-- @input.native="handleInput($event)" -->
                      </p>
                      <p>
                        迟到>
                        <el-input
                          v-model="scope.row.timesLowerLimit"
                          class="inputInfo"
                          disabled
                        />次，每次扣款
                        <!-- @input.native="handleInput($event)" -->
                        <el-input
                          v-model="scope.row.dedAmonutLowerLimit"
                          class="inputInfo"
                        />元
                        <!-- @input.native="handleInput($event)" -->
                      </p>
                    </div>
                    <p>
                      迟到>
                      <el-input
                        v-model="scope.row.periodLowerLimit"
                        class="inputInfo"
                        disabled
                      />分钟
                    </p>
                    <div class="deductionInfo">
                      <p>
                        迟到>
                        <el-input
                          v-model="scope.row.absenceTimesUpperLimt"
                          class="inputInfo"
                          disabled
                        />次，每次旷工
                        <el-input
                          v-model="scope.row.absenceDays"
                          class="inputInfo"
                          @input.native="handleInputPoint($event)"
                        />天
                      </p>
                    </div>
                  </div>
                  <!-- 早退扣款 -->
                  <div
                    v-if="scope.row.dedTypeCode === '52000'"
                    class="attentInfo"
                  >
                    <p>
                      早退≤
                      <el-input
                        v-model="scope.row.periodUpperLimit"
                        class="inputInfo"
                        value="30"
                      />分钟
                      <!-- @input.native="handleInput($event)" -->
                    </p>
                    <div class="deductionInfo">
                      <p>
                        早退≤
                        <el-input
                          v-model="scope.row.timesUpperLimit"
                          class="inputInfo"
                        />次，每次扣款
                        <!-- @input.native="handleInput($event)" -->
                        <el-input
                          v-model="scope.row.dedAmonutUpperLimit"
                          class="inputInfo"
                        />元
                        <!-- @input.native="handleInput($event)" -->
                      </p>
                      <p>
                        早退>
                        <el-input
                          v-model="scope.row.timesLowerLimit"
                          class="inputInfo"
                          disabled
                        />次，每次扣款
                        <el-input
                          v-model="scope.row.dedAmonutLowerLimit"
                          class="inputInfo"
                        />元
                        <!-- @input.native="handleInput($event)" -->
                      </p>
                    </div>
                    <p>
                      早退>
                      <el-input
                        v-model="scope.row.periodLowerLimit"
                        class="inputInfo"
                        disabled
                      />分钟
                    </p>
                    <div style="padding-left: 120px">
                      <p>
                        早退>
                        <el-input
                          v-model="scope.row.absenceTimesUpperLimt"
                          class="inputInfo"
                          disabled
                        />次，每次矿工
                        <el-input
                          v-model="scope.row.absenceDays"
                          class="inputInfo"
                          @input.native="handleInputPoint($event)"
                        />天
                      </p>
                    </div>
                  </div>
                  <!-- 矿工扣款 -->
                  <div
                    v-if="scope.row.dedTypeCode === '53000'"
                    class="attentInfo"
                  >
                    <p>
                      矿工按
                      <el-input
                        v-model="scope.row.fineSalaryMultiples"
                        class="inputInfo"
                      />倍工资处罚
                      <!-- @input.native="handleInput($event)" -->
                    </p>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <el-form-item style="text-align: center; margin: 15px">
              <el-button
                type="primary"
                @click="ondedSubmit"
              >保存更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 加班设置栏 -->
        <el-tab-pane label="加班设置" name="fourth">
          <el-form
            ref="overTimeSetForm"
            :rules="overTimeRules"
            :model="overTimeSetForm"
            label-width="100px"
          >
            <el-form-item label="部门:" prop="departmentId">
              <el-select
                v-model="overTimeSetForm.departmentId"
                placeholder="请选择"
                @change="handleChangeOverTime"
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="加班规则:" prop="rules">
              <el-row
                v-for="(item, index) in overTimeSetForm.rules"
                :key="index"
              >
                <el-col style="margin-left: 10px" :span="9">
                  <el-switch v-model="item.isEnable" />
                  <span style="margin: 10px">{{ item.rule }}</span>
                </el-col>
                <el-col :span="3">
                  <el-checkbox v-model="item.isTimeOff" label="调休假" />
                </el-col>
                <el-col :span="5">
                  <el-time-select
                    v-model="item.ruleStartTime"
                    :disabled="item.isTimeOff?false:true"
                    size="medium "
                    style="width: 135px"
                  />
                </el-col>
                <el-col class="line" :span="0.5">-</el-col>
                <el-col :span="5">
                  <el-time-select
                    v-model="item.ruleEndTime"
                    :disabled="item.isTimeOff?false:true"
                    size="medium "
                    style="width: 135px"
                  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="打卡验证:" prop="isClock">
              <el-switch v-model="overTimeSetForm.isClock" />
              <span style="margin: 10px">加班需要打卡记录</span>
            </el-form-item>

            <el-form-item label="开启补偿:" prop="isCompensationint">
              <el-switch v-model="overTimeSetForm.isCompensationint" />
            </el-form-item>

            <el-form-item label="调休假设置:" prop="latestEffectDate">
              <el-col :span="3.5">
                <span style="margin: 10px">最晚有效期: 次年</span>
              </el-col>
              <el-col :span="6">
                <el-date-picker
                  v-model="overTimeSetForm.latestEffectDate"
                  type="date"
                  size="medium"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>

            <el-form-item prop="unit">
              <el-col :span="3.5">
                <span style="margin: 10px">请假最少单位</span>
              </el-col>
              <el-col :span="2">
                <el-input
                  v-model="overTimeSetForm.unit"
                  size="small"
                /> </el-col>天
            </el-form-item>

            <el-form-item style="text-align: center; margin: 15px">
              <el-button
                type="primary"
                @click="onoverTimeSubmit"
              >保存更新</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 提醒弹出框 -->
    <el-dialog title="提醒" :visible.sync="showRemind" width="19%" center>
      <span
        style="font-size: 14px; line-height: 30px"
      >系统将通过邮件与短信的形式，对全体员工中存在矿工的考勤进行提醒，该提醒每月仅可发送
        1 次。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getRemind">我知道了</el-button>
        <el-button @click="showRemind = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import attendanceApi from '@/api/constant/attendance'

import { getAttendancesList, getAttendance, attendanceSave, getLeave, leaveSave, getDeductions, deductionsSave, getOvertime, overtimeSave, updateAttendance } from '@/api/attendances'
import { getDepartments } from '@/api/departments'

export default {
  data() {
    return {
      departments: [], // 部门列表

      showSet: false, // 设置弹框
      setTabName: 'first', // 设置的tab栏默认项
      styleObj: { // 设置里的表格头样式
        'border-bottom': '2px solid #e8e8e8',
        'background': '#fafafa'
      },
      attSetForm: { // 出勤设置
        departmentId: '', // 部门id
        morningStartTime: '',
        morningEndTime: '',
        afternoonStartTime: '',
        afternoonEndTime: ''
      },
      attRules: { // 出勤验证规则
        departmentId: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ],
        morningStartTime: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ]
      },
      leaveSetForm: { // 请假设置
        departmentId: ''
      },
      leaveData: attendanceApi.type, // 请假表格枚举数据
      leaveRules: { // 请假设置验证规则
        departmentId: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ]
      },
      deductionsSetFrom: { // 扣款设置
        departmentId: ''
      },
      deductionsData: attendanceApi.departmentType, // 扣款表格枚举数据
      deductionsRules: { // 扣款验证规则
        departmentId: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ]
      },
      overTimeSetForm: { // 加班设置
        departmentId: '',
        isClock: false,
        isCompensationint: false,
        latestEffectDate: '',
        rules: attendanceApi.overtimeType,
        unit: ''
      },
      overTimeRules: { // 加班设置验证规则
        departmentId: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ],
        isClock: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ],
        isCompensationint: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ],
        latestEffectDate: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '*号为必填项', trigger: 'blur' }
        ]
      },

      showRemind: false, // 提醒弹框

      centerDialogVisible: false, // 考勤状态中心弹框
      modifyData: { // 考勤状态设置数据
        userId: '',
        day: '',
        adtStatu: ''
      },
      list: [], // 考勤列表当前记录
      monthOfReport: [], // 考勤数据日期
      stateData: attendanceApi, // 考勤状态枚举数据
      loading: false, // 加载等待
      month: '',
      yearMonth: '',
      attendInfo: { // 考勤列表日期数据
        month: '',
        getDate: '',
        getInfo: '',
        name: '',
        counts: '',
        tobeTaskCount: ''
      },
      formData: { // 单选多选表单对象
        page: 1,
        pagesize: 10,
        deptID: [], // 部门id
        stateID: '' // 考勤状态id
      },
      page: { // 分页
        page: 1,
        pagesize: 10,
        total: 0
      }
    }
  },
  created() {
    this.getAttendancesList() // 获取考勤列表
    this.getDepartments() // 获取部门列表
  },
  methods: {
    // 获得部门列表
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departments = depts
    },

    // 初始化数据
    async getAttendancesList() {
      // this.loading = true // 加载
      const { data, monthOfReport, tobeTaskCount } = await getAttendancesList({ ...this.page })
      this.list = data.rows // 当前记录
      this.page.total = data.total // 总条数
      this.attendInfo.counts = data.total
      this.attendInfo.month = monthOfReport // 请求回来的月份
      this.attendInfo.tobeTaskCount = tobeTaskCount // 未处理记录

      const date = new Date()
      const year = date.getFullYear()
      const month = monthOfReport
      const d = new Date(year, month, 0) // 获取月份信息
      this.monthOfReport = d.getDate() // 获取日期
      this.yearMonth = `${year}` + ('' + month < 10 ? '0' + month : month)
      this.month = monthOfReport
      // this.loading = false
    },

    // 点击页码
    pageChange(page) {
      this.page.page = page
      this.getAttendancesList() // 获取数据
    },

    // 发送提醒
    getRemind() {
      this.$message.success('操作成功！')
      this.showRemind = false
    },

    // 出勤点击部门
    async handleChangeAttendance(val) {
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getAttendance(fd)
      console.log(res)
      this.attSetForm = res
    },

    // 出勤设置保存更新
    async attSetSubmit() {
      // 校验 表单的 validate 函数
      await this.$refs.attSetForm.validate()

      if (this.attSetForm.morningStartTime === '' || this.attSetForm.morningEndTime === '' || this.attSetForm.afternoonStartTime === '' || this.attSetForm.afternoonEndTime === '') {
        this.$message.error('*号为必填项')
      } else {
        // 发请求
        await attendanceSave(this.attSetForm)
        // 调用清理函数
        this.attClear()
        // 提示
        this.$message.success('保存成功！')
        // 重新渲染
        this.getAttendancesList()
      }
    },

    // 出勤栏数据清空
    attClear() {
      // 关闭弹窗
      this.$nextTick(() => {
        this.showSet = false
      })
      // 清空数据
      this.attSetForm = {
        departmentId: '', // 部门id
        morningStartTime: '',
        morningEndTime: '',
        afternoonStartTime: '',
        afternoonEndTime: ''
      }
      this.$refs.attSetForm.resetFields()
    },

    // 请假设置点击部门
    async handleChangeLeave(val) {
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getLeave(fd)
      console.log(res)
      if (res.length > 0) {
        res.forEach(item => {
          if (item.isEnable === 0) {
            item.isEnable = true
          } else {
            item.isEnable = false
          }
          this.leaveData.forEach(val => {
            if (val.leaveType === item.leaveType) {
              val.isEnable = item.isEnable
            }
          })
        })
      } else {
        this.leaveData.forEach(val => {
          val.isEnable = false
        })
      }
    },

    // 请假设置保存更新
    async onLeaveSubmit() {
    // 校验 表单的 validate 函数
      // await this.$refs.leaveSetForm.validate()
      if (this.leaveSetForm.departmentId === '') {
        this.$message.error('*号为必填项')
      } else {
        // 数据处理
        this.leaveData.forEach(item => {
          if (item.isEnable) {
            item.isEnable = 0
          } else {
            item.isEnable = 1
          }
          item.departmentId = this.leaveSetForm.departmentId
        })

        // 发请求
        await leaveSave(this.leaveData)
        // 调用清理函数
        this.leaveClear()
        // 提示
        this.$message.success('保存成功！')
        // 重新渲染
        this.getAttendancesList()
      }
    },

    // 请假数据清空
    leaveClear() {
      // 关闭弹窗
      this.$nextTick(() => {
        this.showSet = false
      })
      // 清空数据
      this.leaveSetForm = { departmentId: '' }
      this.$refs.leaveSetForm.resetFields()
      this.setTabName = 'first'
    },

    // 扣款设置点击部门
    async handleChangeDeductions(val) {
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getDeductions(fd)
      if (res.length > 0) {
        res.forEach(item => {
          if (item.isEnable === 0) {
            item.isEnable = true
          } else {
            item.isEnable = false
          }
          this.deductionsData.forEach(val => {
            if (val.dedTypeCode === item.dedTypeCode) {
            // val.isEnable = item.isEnable
              item.name = val.name
            }
          })
        })
        this.deductionsData = res
      } else {
        this.deductionsData = attendanceApi.departmentType
      }
    },

    // 扣款设置保存更新
    async ondedSubmit() {
      // 校验 表单的 validate 函数
      // await this.$refs.deductionsSetFrom.validate()
      if (this.deductionsSetFrom.departmentId === '') {
        this.$message.error('*号为必填项')
      } else {
        // 数据处理
        this.deductionsData.forEach(item => {
          if (item.isEnable) {
            item.isEnable = 0
          } else {
            item.isEnable = 1
          }
        })
        this.deductionsData.map(item => (item.departmentId = this.deductionsSetFrom.departmentId))

        // 发请求
        await deductionsSave(this.deductionsData)
        // 调用清理函数
        this.deductionsClear()
        // 提示
        this.$message.success('保存成功！')
        // 重新渲染
        this.getAttendancesList()
      }
    },

    // 扣款数据清空
    deductionsClear() {
      // 关闭弹窗
      this.$nextTick(() => {
        this.showSet = false
      })
      // 清空数据
      this.deductionsSetFrom = { departmentId: '' }
      this.deductionsData = attendanceApi.departmentType
      this.$refs.deductionsSetFrom.resetFields()
      this.setTabName = 'first'
    },

    // 加班设置点击部门
    async handleChangeOverTime(val) {
      const fd = new FormData()
      fd.append('departmentId', val)
      const res = await getOvertime(fd)

      this.overTimeSetForm.departmentId = res.extraDutyConfig.departmentId

      if (res.extraDutyConfig.isClock === 0) {
        this.overTimeSetForm.isClock = true
      } else {
        this.overTimeSetForm.isClock = false
      }

      if (res.extraDutyConfig.isCompensationint === '0') {
        this.overTimeSetForm.isCompensationint = true
      } else {
        this.overTimeSetForm.isCompensationint = false
      }

      this.overTimeSetForm.latestEffectDate = res.dayOffConfigs.latestEffectDate.substring(res.dayOffConfigs.latestEffectDate.length - 10)

      this.overTimeSetForm.unit = res.dayOffConfigs.unit
    },

    // 加班设置保存更新
    async onoverTimeSubmit() {
      // 校验 表单的 validate 函数
      await this.$refs.overTimeSetForm.validate()
      // 数据处理
      if (this.overTimeSetForm.isClock === true) {
        this.overTimeSetForm.isClock = 0
      } else {
        this.overTimeSetForm.isClock = 1
      }

      if (this.overTimeSetForm.isCompensationint === true) {
        this.overTimeSetForm.isCompensationint = 0
      } else {
        this.overTimeSetForm.isCompensationint = 1
      }

      const data = new Date(this.overTimeSetForm.latestEffectDate)
      const year = data.getFullYear()
      const m = data.getMonth() + 1
      const month = m > 9 ? m : '0' + m
      const d = data.getDate()
      const day = d > 9 ? d : '0' + d

      this.overTimeSetForm.latestEffectDate = `${year}-${month}-${day}`

      this.overTimeSetForm.rules.forEach(item => {
        if (item.isTimeOff === true) {
          item.isTimeOff = 0
        } else {
          item.isTimeOff = 1
        }
        if (item.isEnable === true) {
          item.isEnable = 0
        } else {
          item.isEnable = 1
        }
      })

      // 发请求
      await overtimeSave(this.overTimeSetForm)
      // 调用清理函数
      this.overTimeClear()
      // 提示
      this.$message.success('保存成功！')
      // 重新渲染
      this.getAttendancesList()
    },

    // 加班数据清空
    overTimeClear() {
      // 关闭弹窗
      this.$nextTick(() => {
        this.showSet = false
      })
      // 清空数据
      attendanceApi.overtimeType.forEach(item => {
        item.isTimeOff = false // 是否调休
        item.isEnable = false // 是否可用
        item.ruleStartTime = null
        item.ruleEndTime = null
      })
      this.overTimeSetForm = { // 加班设置
        departmentId: '',
        isClock: false,
        isCompensationint: false,
        latestEffectDate: '',
        rules: attendanceApi.overtimeType,
        unit: ''
      }
      this.$refs.deductionsSetFrom.resetFields()
      this.setTabName = 'first'
    },

    // 关闭设置弹窗(){
    onCancel() {
      if (this.setTabName === 'first') {
        this.attClear()
      }
      if (this.setTabName === 'second') {
        this.leaveClear()
      }
      if (this.setTabName === 'third') {
        this.deductionsClear()
      }
      if (this.setTabName === 'fourth') {
        this.overTimeClear()
      }
    },

    // 切换tab栏的回调
    handleClick(tab, event) {
      // console.log(tab.event)
    },

    // 点击考勤数据状态弹窗
    showChangeDialog(item, id, it) {
      // console.log(item, id, it)
      this.modifyData.userId = item.id
      this.modifyData.day = it.day
      this.modifyData.departmentId = item.departmentId
      this.modifyData.adtStatu = it.adtStatu + '' // 数字转成字符串

      if (it.adtStatu !== '') {
        this.attendInfo.getDate = parseInt(id + 1)
        this.attendInfo.getInfo = it.adtStatu
        this.attendInfo.name = item.name
        this.centerDialogVisible = true
      }
    },

    // 考勤数据确认更新
    async centerbtnOK() {
      // 调用接口
      await updateAttendance(this.modifyData)
      // 隐藏弹窗
      this.centerDialogVisible = false
      // 重新渲染
      this.getAttendancesList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
.page-tools {
  transform: translateY(-30px);
  margin: 10px 10px 0;
  .before {
    line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
}

.el-alert__icon {
  font-size: 28px;
  width: 28px;
}

.formInfo {
  margin-top: 20px;
}

.tableInfo {
  line-height: 36px;
  border: solid 1px #ebeef5;
  border-right: 0 none;
  border-bottom: 0 none;
  tr {
    th {
      height: 50px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
      border-bottom: 2px solid #e8e8e8;
      background: #fafafa;
      min-width: 100px;
    }
    td {
      height: 36px;
      text-align: center;
      border-right: solid 1px #ebeef5;
      border-bottom: solid 1px #ebeef5;
    }
  }
}

.inputInfo {
  width: 60px;
}

::v-deep .attentInfo {
  padding: 30px 15px 15px 80px;

  .deductionInfo {
    padding: 0 120px 0;
  }
  .el-input {
    .el-input__inner {
      height: 25px;
      line-height: 25px;
    }
  }
}

.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
      display: inline-block;
      width: 60px;
      padding: 5px 0;
    }
  }
}
</style>
